<template>
  <div class="h-full subjectAll-box">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form ref="filterForm" :elements="elements" :show-reset="true" @submit="submit">
          <template>
            <el-button v-waves type="primary" icon="el-icon-plus" @click="drawerAdd">新增</el-button>
          </template>
        </filter-form>
      </template>
      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="tableEl"
            :pagination="pagination"
            @paginationChange="paginationChange"
          >
            <template #status="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                @change="operating(scope.row)"
              />
            </template>
            <template #action="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="查看数据项"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-tickets action"
                  @click="ticketsFun(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-edit-outline action"
                  @click="editFun(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-delete action red"
                  @click="removeFun(scope.row)"
                />
              </el-tooltip>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>
    <Drawer
      :visible="drawerVisible"
      :title="[isEdit ? '添加' : '编辑'] + '字典'"
      width="35%"
      :footer-btns="footerBtns"
      @submit="drawerSubmit"
      @cancel="drawerCancel"
    >
      <template>
        <el-form ref="drawerForm" :model="drawerForm" size="mini" :rules="drawerRules" label-width="140px" class="mx-15 mt-10">
          <el-form-item label="字典名称" prop="dictionaryName">
            <el-input v-model="drawerForm.dictionaryName" placeholder="请输入字典名称" />
          </el-form-item>
          <el-form-item label="字典编码" prop="dictionaryCode">
            <el-input v-model="drawerForm.dictionaryCode" placeholder="请输入字典编码" />
          </el-form-item>
          <el-form-item label="描述" prop="remark">
            <el-input
              v-model="drawerForm.remark"
              type="textarea"
              placeholder="请输入描述"
            />
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="drawerForm.status"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
        </el-form>
      </template>
    </Drawer>
  </div>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import { listYsDictionaryPage, saveOrUpdateYsDictionary, removeYsDictionaryById, updateYsDictionaryStatus
} from '@/api/settings/dictionary'
export default {
  name: 'DepartmentCompare', // 数据字典
  components: {},
  mixins: [baseFilterTable],
  props: {},
  data() {
    const alphanumeric = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请输入字典编码'))
      } else if (!/^[0-9A-Za-z]+$/.test(value)) {
        callback(new Error('只能输入字母和数字'))
      } else {
        callback()
      }
    }
    return {
      isEdit: true,
      baseInfo: {
        searchBarShow: true
      },
      tableData: [],
      tableEl: [
        {
          title: '字典名称',
          dataIndex: 'dictionaryName'
        },
        {
          title: '字典编码',
          dataIndex: 'dictionaryCode'
        },
        {
          title: '是否启用',
          dataIndex: 'status',
          type: 'otherTag'
        },
        {
          title: '描述',
          dataIndex: 'remark'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      elements: [
        {
          label: '字典名称',
          type: 'input',
          key: 'dictionaryName',
          value: ''
        }
      ],
      departmentList: [], // 系统部门列表
      footerBtns: [
        {
          text: '保存',
          type: 'primary',
          loading: false,
          trigger: 'submit'
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      drawerForm: {
        status: true
      },
      drawerRules: {
        dictionaryName: [
          { required: true, message: '请输入字典名称', trigger: 'change' }
        ],
        dictionaryCode: [
          { required: true, validator: alphanumeric, trigger: 'change' }
        ]
      },
      title: '添加',
      isBack: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    submit(val, isBack) {
      if (this.isBack) {
        this.pagination.current = 1
      }
      this.getData(val)
    },
    paginationChange(val) {
      this.isBack = false
      this.pagination.current = val?.current || this.pagination.current
      this.pagination.pageSize = val?.pageSize || this.pagination.pageSize
      this.$refs.filterForm.submitFormFilter()
    },
    getData(val) {
      const params = {
        num: this.pagination.current,
        size: this.pagination.pageSize,
        dictionaryName: val?.dictionaryName
      }
      this.tableLoading = true
      listYsDictionaryPage(params).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
        this.isBack = true
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 新增
    drawerAdd() {
      this.drawerVisible = true
      this.isEdit = true
    },
    // 是否参与业务预算
    operating(row) {
      const params = {
        id: row.id,
        status: row.status
      }
      updateYsDictionaryStatus(params).then(res => {
        if (res.code === 200) {
          this.getData(this.searchParams)
          this.$message.success(res.message)
        } else {
          this.getData(this.searchParams)
          this.$message.error(res.message)
        }
      })
    },
    // 查看数据项
    ticketsFun(row) {
      this.$router.push({
        path: '/settings/data-item',
        // name: '查看数据项',
        query: {
          id: row.id
        }
      })
    },
    // 编辑
    editFun(row) {
      this.drawerVisible = true
      this.isEdit = false
      this.drawerForm = { ...row }
    },
    removeFun(item) {
      this.$confirm({
        content: '此操作将删除该条记录,并无法恢复, 是否继续?',
        title: '确认提示',
        okFn: () => {
          const params = {
            id: item.id
          }
          removeYsDictionaryById(params).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message || '操作成功')
              this.$refs.filterForm.submitFormFilter()
            } else {
              this.$message.error(res.message || '操作失败')
            }
          })
        }
      })
    },
    // 抽屉 提交
    drawerSubmit() {
      this.$refs.drawerForm.validate((valid) => {
        if (valid) {
          this.footerBtns[0].loading = true
          saveOrUpdateYsDictionary(this.drawerForm).then(res => {
            this.footerBtns[0].loading = false
            if (res.code === 200) {
              this.getData(this.searchParams)
              this.drawerCancel()
              this.$message.success(res.message || '操作成功')
            } else {
              this.$message.error(res.message || '提交失败')
            }
          }).catch(() => {
            this.footerBtns[0].loading = false
          })
        }
      })
    },
    // 抽屉 关闭
    drawerCancel() {
      this.$refs.drawerForm.resetFields()
      this.drawerVisible = false
      this.drawerForm.id = ''
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red{
  color: #F56C6C;
}
/deep/.el-textarea__inner {
  min-height: 160px !important;
}
</style>
